<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>表单</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <script type="text/javascript" src="../../assets/lib/iframe-resizer-3.6.3/iframeResizer.contentWindow.min.js"></script>
  <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="form_submit" class="ss_form_wrapper">
    <div class="ss_form_main">
      <h1 class="ss_form_head_title" v-show="title"> {{ title }} </h1>
      <div class="ss_form_head_desc" v-show="description"> {{ description }} </div>
      <div class="ss_form_bg"></div>
      <template v-if="pageType === 'form'">
        <ul class="ss_form_ul">
          <li v-for="fieldInfo in fieldInfoList">
            <div class="ss_form_title"> {{ fieldInfo.title }} <i v-if="fieldInfo.validate.indexOf('required') !== -1">*</i>
              <small v-show="errors.has(fieldInfo.title)" class="error">{{ errors.first(fieldInfo.title) }}</small>
            </div>
            <template v-if="fieldInfo.fieldType === 'TextArea'">
              <div class="ss_form_body">
                <textarea v-model="fieldInfo.value" :style="'height: ' + (fieldInfo.height ? fieldInfo.height : 125) + 'px;'"
                  :name="fieldInfo.title" v-validate="fieldInfo.validate" class="form-control" :class="{'error': errors.has(fieldInfo.title)}"></textarea>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 0">
              <div class="ss_form_body">
                <span v-for="(item, index) in fieldInfo.items">
                  <input type="checkbox" v-model="fieldInfo.value" :id="fieldInfo.title + '_' + item.id" :value="item.value"
                    :name="fieldInfo.title" v-validate="fieldInfo.validate">
                  <label :for="fieldInfo.title + '_' + item.id" class="mr-2">{{ item.value }}</label>
                </span>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 1">
              <div class="ss_form_body">
                <div v-for="(item, index) in fieldInfo.items">
                  <input type="checkbox" v-model="fieldInfo.value" :id="fieldInfo.title + '_' + item.id" :value="item.value"
                    :name="fieldInfo.title" v-validate="fieldInfo.validate">
                  <label :for="fieldInfo.title + '_' + item.id" class="mr-2">{{ item.value }}</label>
                  <br />
                </div>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 0">
              <div class="ss_form_body">
                <span v-for="(item, index) in fieldInfo.items">
                  <input type="radio" v-model="fieldInfo.value" :id="item.value" :value="item.value" :name="fieldInfo.title"
                    v-validate="fieldInfo.validate">
                  <label :for="fieldInfo.title + '_' + item.id" class="mr-2">{{ item.value }}</label>
                </span>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 1">
              <div class="ss_form_body">
                <div v-for="(item, index) in fieldInfo.items">
                  <input type="radio" v-model="fieldInfo.value" :id="item.value" :value="item.value" :name="fieldInfo.title"
                    v-validate="fieldInfo.validate">
                  <label :for="fieldInfo.title + '_' + item.id" class="mr-2">{{ item.value }}</label>
                  <br />
                </div>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'SelectOne'">
              <div class="ss_form_body">
                <select :name="fieldInfo.title" v-model="fieldInfo.value" :class="{'error': errors.has(fieldInfo.title) }"
                  v-validate="fieldInfo.validate">
                  <option v-for="item in fieldInfo.items" :value="item.value">{{ item.value }}</option>
                </select>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'SelectMultiple'">
              <div class="ss_form_body">
                <select multiple style="height: 130px" :name="fieldInfo.title" v-model="fieldInfo.value" :class="{'error': errors.has(fieldInfo.title) }"
                  v-validate="fieldInfo.validate">
                  <option v-for="item in fieldInfo.items" :value="item.value">{{ item.value }}</option>
                </select>
              </div>
            </template>
            <template v-else-if="fieldInfo.fieldType === 'Image'">
              <div class="ss_form_body">
                  <file-pond
                  :allow-multiple="false"
                  :server="getUploadUrl(fieldInfo)"
                  :files="files"
                  accepted-file-types="image/jpeg, image/png, image/webp"
                  label-idle="点击上传或将图片拖动至此区域..."
                  label-file-processing="上传中..."
                  label-file-processing-complete="上传成功"
                  v-on:processfile="imageUploaded"
                  v-on:removefile="imageRemoved(fieldInfo)"
                  ></file-pond>
      
                  <input
                    v-model="fieldInfo.value"
                    type="hidden"
                    :name="fieldInfo.title"
                    v-validate="fieldInfo.validate"
                    :class="{'is-invalid': errors.has(fieldInfo.title)}"
                  />
              </div>
            </template>
            <template v-else>
              <input type="text" value="" :name="fieldInfo.title" v-model="fieldInfo.value" class="form-control" :class="{'error': errors.has(fieldInfo.title) }"
                v-validate="fieldInfo.validate" />
            </template>
          </li>
        </ul>
        <div v-if="isCaptcha" class="ss_form_code">
          <input v-model="captcha" type="text" class="form-control float-left" name="captcha" data-vv-as="验证码"
            v-validate="'required'" :class="{'is-invalid':
errors.has('captcha') || captchaInValid}">
          <img :src="captchaUrl" class="ss_form_code_img" @click="loadCaptcha" style="width: 105px; height: 35px" />
          <small v-show="errors.has('captcha')" class="text-danger">{{ errors.first('captcha') }}</small>
          <small v-show="captchaInValid" class="text-danger">验证码不正确，请重新输入！</small>
        </div>
        <a @click="btnSubmitClick" href="javascript:;" class="ss_form_btn">提 交</a>
      </template>
      <template v-else-if="pageType === 'error'">
        <div class="ss_form_failure">{{ errorMessage }}</div>
      </template>
      <template v-else-if="pageType === 'success'">
        <div class="ss_form_success">表单提交成功</div>
      </template>
      <template v-else>
        <div class="text-center" style="margin-top: 100px">
          <img class="mt-3" src="../../assets/images/loading.gif" />
          <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
        </div>
      </template>
    </div>
  </div>
</body>

</html>
<script src="../../assets/lib/lodash-4.17.10.min.js"></script>
<script src="../../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../../assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="../../assets/lib/axios-0.18.0.min.js"></script>

<link href="../../assets/lib/filepond/filepond-4.4.2.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../../assets/lib/filepond/babel-polyfill-7.4.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-polyfill-1.0.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-plugin-file-validate-type-1.2.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.js"></script>
<script src="../../assets/lib/filepond/filepond-4.4.2.min.js"></script>
<script src="../../assets/lib/filepond/vue-filepond-5.1.0.min.js"></script>

<script src="../../assets/js/submit.js" type="text/javascript"></script>
